/* 1. 级联层 ------------------------------------------------------------- */
@layer reset, theme, base, components, utilities, motion;

/* 2. 主题变量（OKLCH 均匀色空间） --------------------------------------- */
@layer theme {
  :root {
    /* ====== 薄荷青 10 阶色板 ====== */
    --hue-primary: 195;
    --c-p-0: oklch(98% 0.02 var(--hue-primary));
    --c-p-1: oklch(93% 0.05 var(--hue-primary));
    --c-p-2: oklch(87% 0.08 var(--hue-primary));
    --c-p-3: oklch(80% 0.11 var(--hue-primary));
    --c-p-4: oklch(78% 0.19 var(--hue-primary)); /* 主色 */
    --c-p-5: oklch(70% 0.18 var(--hue-primary));
    --c-p-6: oklch(62% 0.17 var(--hue-primary));
    --c-p-7: oklch(54% 0.16 var(--hue-primary));
    --c-p-8: oklch(46% 0.15 var(--hue-primary));
    --c-p-9: oklch(38% 0.13 var(--hue-primary));

    /* 语义映射 */
    --color-primary: var(--c-p-4);
    --color-primary-light: var(--c-p-2);
    --color-primary-dark: var(--c-p-6);
    --color-on-primary: var(--c-p-0);

    /* 中性灰 OKLCH */
    --hue-gray: 220;
    --c-n-0: oklch(99% 0 var(--hue-gray));
    --c-n-1: oklch(95% 0.005 var(--hue-gray));
    --c-n-2: oklch(90% 0.01 var(--hue-gray));
    --c-n-3: oklch(82% 0.015 var(--hue-gray));
    --c-n-4: oklch(70% 0.02 var(--hue-gray));
    --c-n-5: oklch(58% 0.025 var(--hue-gray));
    --c-n-6: oklch(46% 0.03 var(--hue-gray));
    --c-n-7: oklch(34% 0.025 var(--hue-gray));
    --c-n-8: oklch(24% 0.02 var(--hue-gray));
    --c-n-9: oklch(14% 0.015 var(--hue-gray));

    /* 背景 & 文字 */
    --color-background: var(--c-n-1);
    --color-surface: var(--c-n-0);
    --color-surface-glass: oklch(100% 0 0 / 60%); /* 玻璃底色 */
    --color-text-primary: var(--c-n-9);
    --color-text-secondary: var(--c-n-6);
    --color-border: var(--c-n-3);

    /* 阴影：亮度差自动适配暗色 */
    --shadow-1: 0 1px 3px oklch(70% 0.05 var(--hue-gray) / 6%);
    --shadow-2: 0 4px 12px oklch(60% 0.05 var(--hue-gray) / 10%);
    --shadow-3: 0 10px 30px oklch(50% 0.05 var(--hue-gray) / 14%);
    --shadow-inner: inset 0 2px 4px oklch(0 0 0 / 4%);

    /* 动画曲线 */
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    /* 过渡 */
    --duration-fast: 0.15s;
    --duration-normal: 0.3s;
    --duration-slow: 0.5s;
  }

  /* 暗色模式：仅翻转亮度 */
  @media (prefers-color-scheme: dark) {
    :root {
      --color-background: var(--c-n-8);
      --color-surface: var(--c-n-7);
      --color-surface-glass: oklch(20% 0.01 var(--hue-gray) / 50%);
      --color-text-primary: var(--c-n-0);
      --color-text-secondary: var(--c-n-2);
      --color-border: var(--c-n-5);
      --shadow-1: 0 1px 3px oklch(0 0 0 / 40%);
      --shadow-2: 0 4px 12px oklch(0 0 0 / 50%);
      --shadow-3: 0 10px 30px oklch(0 0 0 / 60%);
    }
  }
}

/* 3. 基础重置 ----------------------------------------------------------- */
@layer base {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  html {
    scroll-behavior: smooth;
    font-size: 16px;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background: var(--color-background);
    color: var(--color-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  img {
    max-width: 100%;
    display: block;
  }
  button {
    cursor: pointer;
    font-family: inherit;
    border: none;
    background: none;
  }
}

/* 4. 高级组件 ----------------------------------------------------------- */
@layer components {
  /* 玻璃拟态卡片 */
  .card-glass {
    background: var(--color-surface-glass);
    border: 1px solid oklch(100% 0 0 / 20%);
    border-radius: 24px;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--shadow-2), var(--shadow-inner);
    transition: transform var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal);
  }
  .card-glass:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-3), var(--shadow-inner);
  }

  /* 发光按钮 */
  .btn-glow {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-on-primary);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: 9999px;
    overflow: hidden;
    z-index: 1;
    transition: transform var(--duration-fast) var(--ease-elastic);
  }
  .btn-glow::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: conic-gradient(from 180deg at 50% 50%, var(--color-primary), var(--color-primary-light), var(--color-primary));
    filter: blur(8px);
    opacity: 0.6;
    z-index: -1;
    transition: opacity var(--duration-normal);
  }
  .btn-glow:hover::before {
    opacity: 1;
  }
  .btn-glow:active {
    transform: scale(0.96);
  }

  /* 超细分割线 */
  .divider-fine {
    height: 1px;
    background: var(--color-border);
    margin: var(--spacing-lg) 0;
    border: none;
  }

  /* 文字渐变标题 */
  .text-gradient {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

/* 5. 动画/动效工具 ------------------------------------------------------ */
@layer motion {
  .fade-in {
    animation: fadeIn 0.6s var(--ease-smooth) forwards;
  }
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .slide-up {
    animation: slideUp 0.5s var(--ease-smooth) forwards;
  }
  @keyframes slideUp {
    from {
      transform: translateY(30px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  .spin {
    animation: spin 1s linear infinite;
  }
  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
}

/* 6. 原子工具（保持简洁） ----------------------------------------------- */
@layer utilities {
  .flex {
    display: flex;
  }
  .items-center {
    align-items: center;
  }
  .justify-between {
    justify-content: space-between;
  }
  .gap-md {
    gap: var(--spacing-md);
  }
  .text-center {
    text-align: center;
  }
  .p-md {
    padding: var(--spacing-md);
  }
  .rounded-lg {
    border-radius: var(--border-radius-lg);
  }
  .shadow-2 {
    box-shadow: var(--shadow-2);
  }
}